<template>
  <div class="rose-echarts">
    <BaseEcharts :options="options"></BaseEcharts>
  </div>
</template>

<script>
import { reactive, toRefs, ref, computed } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { defineComponent } from "vue";
import BaseEcharts from "@/base-ui/echarts";
export default defineComponent({
  components: {
    BaseEcharts
  },
  setup() {
    const router = useRouter();
    const store = useStore();

    const options = computed(() => {
      return {
        title: {
          left: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          left: "center",
          top: "bottom",
          data: ["衣物", "电子产品", "书本", "玩具", "家电"]
        },
        toolbox: {
          show: true
        },
        series: [
          {
            name: "Radius Mode",
            type: "pie",
            radius: [20, 80],
            center: ["50%", "50%"],
            roseType: "radius",
            itemStyle: {
              borderRadius: 5
            },
            label: {
              show: false
            },
            emphasis: {
              label: {
                show: true
              }
            },
            data: [
              { value: 40, name: "衣物" },
              { value: 33, name: "电子产品" },
              { value: 28, name: "书本" },
              { value: 22, name: "玩具" },
              { value: 20, name: "家电" }
            ]
          }
        ]
      };
    });

    return {
      options
    };
  }
});
</script>
<style scoped lang="less"></style>
